<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图围栏</title>
    <style>
        #box {
            min-width: 600px;
            min-height: 767px;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
</body>
<script charset="utf-8"
    src="https://map.qq.com/api/js?v=2.exp&key=LDCBZ-JNNRW-CGLR2-RKOXF-NRDZH-RZBBZ&libraries=drawing,convertor">
</script>

<script>
    window.onload = function () {
        // 直接加载地图

        const center = new qq.maps.LatLng(30.673944, 103.991089);

        //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
        const map = new qq.maps.Map(document.getElementById("box"), {
            center, // 地图的中心地理坐标。
            zoom: 14 // 地图的中心地理坐标。
        });

        const circle = new qq.maps.Circle({
            map: map,
            center,
            radius: 1000,
            strokeWeight: 5
        });

        // 获取圆的区域范围
        const boundsCircle = circle.getBounds();

        //添加监听事件   获取鼠标单击事件
        qq.maps.event.addListener(map, 'click', function (event) {

            console.log(event.latLng);

            const marker = new qq.maps.Marker({
                position: event.latLng,
                map: map
            });

            // 判断点是否在圆的区域范围内
            const flag = boundsCircle.contains(event.latLng);

            console.log(flag);

            qq.maps.event.addListener(map, 'click', function (event) {
                marker.setMap(null);
            });
        });
    }
</script>


</html>